<template>
	<div class="routineattachment">
		<el-card>
			<template #header>
				<div class="card-header clearfix">
					<span class="headerTitle">附件管理</span>
					<div class="floatRight">
						<el-button type="primary" v-if="isAuthBtn('add')" @click="uploadBtn('open')"><i class="fa fa-cloud-upload"></i>上传</el-button>
					</div>
				</div>
			</template>
			<div class="attachmentData">
				<div class="attachmentData-harder">
					<div >
						<el-radio-group v-model="state.fileData.isCollapse">
							<el-radio-button :label="true" >收起文件夹</el-radio-button>
							<el-radio-button :label="false" >显示文件夹</el-radio-button>
						</el-radio-group>
					</div>
					<div style="margin-left:10px;">
						<el-radio-group v-model="state.pageInfo.type" @change="typechange">
							<el-radio-button :label="item.key" v-for="item,index in state.pageInfo.typeList" :key="index " >{{item.name}}</el-radio-button>
						</el-radio-group>
					</div>
				</div>
				<div class="attachmentData-table">
					<div class="attachmentData-table-left" :class="state.fileData.isCollapse?'close':'open'">
						<div class="attachmentData-table-left-item k-text-center">
								<el-button v-if="isAuthBtn('add')" type="primary" size="default" @click="addFileBtn('add')"><i class="fa fa-pencil-square-o"></i>新增文件夹</el-button>
						</div>
						<div class="attachmentData-table-left-item">
							<el-input v-model="state.fileKey" clearable placeholder="搜索文件夹名字" class="input-with-select" @keyup.enter.native="state.fileKey?getfileList():''" @clear="getfileList">
								<template #append>
								<el-button  @click="state.fileKey?getfileList():''">
										<i class="fa fa-search"></i>
								</el-button>
								</template>
							</el-input>
						</div>
						<div class="attachmentData-table-left-item k-line-1" v-for="item,index in state.fileData.list" :key="index" @click="fileBtn(item)">
							<div :class="state.accessoryData.fileId==item.id?'active':''">
								<i class="fa fa-folder"></i> {{item.fileName}}<span v-if="item.total">（{{item.total}}）</span>
							</div>
							<div class="fileBtnCss" :style="(state.accessoryData.fileId==item.id?'display: block':'')" v-if="item.id!='0'&&item.id">
								<el-tooltip
									class="box-item"
									effect="dark"
									content="修改"
									placement="top" >
									<el-button circle v-if="isAuthBtn('editor')" type="warning" size="small" @click.stop="addFileBtn('editor',item)"><i class="oneIcon fa fa-pencil-square-o"></i></el-button>
								</el-tooltip>
								<el-tooltip
									class="box-item"
									effect="dark"
									content="删除"
									placement="top" >
									<el-button circle v-if="isAuthBtn('del')" type="danger" size="small" @click.stop="addFileBtn('del',item)"><i class="oneIcon fa fa-trash"></i></el-button>
								</el-tooltip>
							</div>
						</div>
						<div class="attachmentData-table-left-item" style="margin-top: 10px;">
								<el-pagination
								:hide-on-single-page="state.fileData.pages.pageCount>1?false:true"
								v-model:current-page="state.fileData.pages.pno"
								v-model:page-size="state.fileData.pages.pageSize"
								:total="state.fileData.pages.recordCount"
								small
								background
								layout="prev, pager, next"
								@current-change="fileChange"
							  />
						</div>
					</div>
					<div class="attachmentData-table-right" :style="'width:'+(state.fileData.isCollapse?'calc(100% - 0px)':'calc(100% - 186px)')+';'">
						<!--<el-image :src="item.url" v-for="item,index in state.accessoryData.list">
						</el-image>-->
						<div class="attachmentData-table-right-head clearfix">
							<el-tooltip
								class="box-item"
								effect="dark"
								content="刷新"
								placement="top" >
								<el-button color="#333" @click="getAccessoryList()"><i class="fa fa-refresh"></i></el-button>
							</el-tooltip>
							<el-tooltip
								class="box-item"
								effect="dark"
								content="删除选中的行"
								placement="top" >
								<el-button type="danger" v-if="isAuthBtn('del')" @click="accessoryDelBtn(state.accessoryData.selectList)" :disabled="state.accessoryData.selectList.length>0?false:true"><i class="fa fa-trash"></i>删除</el-button>
							</el-tooltip>
							<el-tooltip
								class="box-item"
								effect="dark"
								content="移动到文件夹"
								placement="top" >
								<el-button type="primary" v-if="isAuthBtn('editor')" @click="accessoryYidongBtn(state.accessoryData.selectList)" :disabled="state.accessoryData.selectList.length>0?false:true"><i class="fa fa-random"></i>移动</el-button>
							</el-tooltip>
							<div class="headerSearch">
								<el-input v-model="state.accessoryKey" clearable placeholder="搜索附件名字" class="input-with-select" @keyup.enter.native="state.accessoryKey?getAccessoryList():''" @clear="getAccessoryList()">
									<template #append>
									<el-button  @click="state.accessoryKey?getAccessoryList():''">
											<i class="fa fa-search"></i>
									</el-button>
									</template>
								</el-input>
							</div>
							<div class="floatRight">
								<el-dropdown :max-height="380" :hide-on-click="false">
									<el-button color="#dcdfe6" ><i class="fa fa-th"></i></el-button>
									<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item v-for="(item, idx) in state.tbhdList" :key="idx" >
											<el-checkbox
												@change="onChangeShowColumn(idx)"
												:checked="!item.show"
												:model-value="item.show"
												:label="item.label"
												v-if="item.tb"
											/>
										</el-dropdown-item>
									</el-dropdown-menu>
								</template>
								</el-dropdown>
							</div>
						</div>
						<div class="attachmentData-table-right-center" v-loading="state.tbloading" >
							<el-table
								ref="multipleTableRef"
								:data="state.accessoryData.list"
								style="width: 100%"
								sortable="custom"
								@sort-change="sortBtn"
								@selection-change="handleSelectionChange"
							>
								<el-table-column type="selection" width="55" />
								<template  v-for="item,index in state.tbhdList" :key="index">
									<el-table-column :label="item.label" :width="item.width" min-width="100" :prop="item.prop" v-if="item.show&&item.tb" :align="item.align" :sortable="item.paixu?true:false">
										<template #default="scope">
											<div v-if="item.type=='img'">
												<el-image style="width: 100px; height: 100px" :src="scope.row[item.prop]" preview-teleported  :preview-src-list="[scope.row[item.prop]]" fit="cover" />
											</div>
											<div v-if="item.type=='text'">
												{{ scope.row[item.prop] }}
											</div>
											<div v-if="item.type=='tag'">
												<el-tag :type="scope.row[item.prop].type" class="mx-1" effect="dark" >
													{{ scope.row[item.prop].label }}
												</el-tag>
											</div>
											<div v-if="item.type=='list'">
												<div v-for="it,idx in scope.row[item.prop]" :key="idx">
													{{idx}}：{{it}}
												</div>
											</div>
											<div v-if="item.type=='user'">
												<div v-if="scope.row.uid>0">
													<el-popover
														placement="top-start"
														width="aotu"
														trigger="hover"
													>
														<template #reference>
														<el-button type="primary"  link>{{ scope.row[item.prop].uname }}</el-button>
														</template>
														<template #default>
															<div>
																<el-avatar
																	:size="60"
																	:src="scope.row[item.prop].photo"
																	style="margin-bottom: 8px"
																/>
																<div v-if="scope.row[item.prop].uid" @click.stop="copyText(scope.row[item.prop].uid)"><el-button type="primary"  link>UID：{{scope.row[item.prop].uid}}</el-button></div>
																<div v-if="scope.row[item.prop].email" @click.stop="copyText(scope.row[item.prop].email)"><el-button type="primary"  link>邮箱：{{scope.row[item.prop].email}}</el-button></div>
																<div v-if="scope.row[item.prop].phone" @click.stop="copyText(scope.row[item.prop].phone)"><el-button type="primary"  link>手机号码：{{scope.row[item.prop].phone}}</el-button></div>
															</div>
														</template>
													</el-popover>
												</div>
												<div v-else>
													<el-button type="primary"  link>{{ scope.row[item.prop].uname }}</el-button>
												</div>
											</div>
										</template>
									</el-table-column>
								</template>
								<el-table-column fixed="right" label="操作" min-width="200" align="center">
									<template #default="scope">
										<el-tooltip
											class="box-item"
											effect="dark"
											content="预览"
											placement="top" >
											<el-button circle v-if="isAuthBtn('index')" type="info" size="default" @click="tourl(scope.row.url,1)"><i class="oneIcon fa fa-eye"></i></el-button>
										</el-tooltip>
										<el-tooltip
											class="box-item"
											effect="dark"
											content="修改"
											placement="top" >
											<el-button circle v-if="isAuthBtn('editor')" type="warning" size="default" @click="accessoryUpBtn(scope.row)"><i class="oneIcon fa fa-pencil-square-o"></i></el-button>
										</el-tooltip>
										<el-tooltip
											class="box-item"
											effect="dark"
											content="移动"
											placement="top" >
											<el-button circle v-if="isAuthBtn('editor')" type="primary" size="default" @click="accessoryYidongBtn([scope.row])"><i class="oneIcon fa fa-arrows"></i></el-button>
										</el-tooltip>
										<el-tooltip
											class="box-item"
											effect="dark"
											content="删除"
											placement="top" >
											<el-button circle v-if="isAuthBtn('del')" type="danger" size="default" @click="accessoryDelBtn([scope.row])"><i class="oneIcon fa fa-trash"></i></el-button>
										</el-tooltip>
									</template>
								</el-table-column>
							</el-table>
							<div class="pagination-block clearfix">
								<div class="pagination-right">
									<el-pagination
									v-model:current-page="state.accessoryData.pages.pno"
									v-model:page-size="state.accessoryData.pages.pageSize"
									:page-sizes="[10, 50, 100, 200]"
									layout="total, sizes, prev, pager, next, jumper"
									:total="state.accessoryData.pages.recordCount"
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-card>
		<!--上传弹窗-->
		<el-dialog v-model="state.uploadBtnShow" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" draggable title="上传文件">
			<div>
				<el-upload
					class="upload-demo"
					drag
					:action="state.pageInfo.domain"
					multiple
					:headers="state.uploadData.headers"
					:data="state.uploadData.data"
					:accept="state.uploadData.selectType"
					:on-success="uploadSuccess"
					list-type="picture-card"
					v-model:file-list="state.uploadData.fileList"
					:on-preview="uploadPreview"
				>
					<i class="fa fa-cloud-upload"></i>
					<div class="el-upload__text">
					拖拽文件上传 或者<em>点击上传</em>
					</div>
					<template #tip>
					<div class="el-upload__tip">
						{{state.pageInfo.msg}}
					</div>
					</template>
				</el-upload>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="uploadBtn('close')" v-if="state.uploadData.fileList.length<=0">取消</el-button>
					<el-button type="primary" @click="uploadBtn('close')" v-if="state.uploadData.fileList.length>0">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 新建/修改文件夹弹窗 -->
		<el-dialog v-model="state.addFileShow" center :title="state.fileForm.id?state.fileForm.lx=='file'?'修改文件夹':'修改附件信息':'新增文件夹'">
			<div>
				<el-form :model="state.fileForm" label-width="120px" @submit.native.prevent>
					<el-form-item :label="state.fileForm.lx=='file'?'文件夹名字':'附件名称'">
						<el-input v-model="state.fileForm.name" />
					</el-form-item>
					<el-form-item :label="'缩略图'" v-if="state.pageInfo.type!='1'">
						<!-- <el-input v-model="state.fileForm.imgurl" /> -->
						<div class="selectImg">
							<el-image style="width: 100%;height: 100%;" fit="cover" :src="state.fileForm.imgurl">
								<template #error>
									<div style="line-height: 150px;text-align: center;">
										暂无图片
									</div>
								</template>
							</el-image>
							<div class="imgBtn">
								<i class="fa fa-eye" v-if="state.fileForm.imgurl"  @click="selectImgBtn('eye')"></i>
								<i class="fa fa-trash-o selectDel" v-if="state.fileForm.imgurl"  @click="selectImgBtn('del')"></i>
								<i class="fa fa-file-image-o" v-if="!state.fileForm.imgurl" @click="selectImgBtn('select')"></i>
							</div>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.addFileShow = false">取消</el-button>
					<el-button type="primary" @click="qudingBtn">确认</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 移动附件文件夹 -->
		<el-dialog v-model="state.yidongFileShow" center title="移动到文件夹">
			<div>
				<el-form label-width="120px">
					<el-form-item label="选择文件夹">
						<el-select
							v-model="state.yidongFileId"
							:multiple="false"
							filterable
							remote
							clearable
							reserve-keyword
							placeholder="请输入关键字"
							:remote-method="searchFileName"
							:loading="state.flieloading"
						>
							<el-option
							v-for="item in state.searchFileList"
							:key="item.id"
							:label="item.fileName"
							:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.yidongFileShow = false">取消</el-button>
					<el-button type="primary" @click="qdydBtn">确认</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="imageShow">
			<img style="width:100%;" :src="imageUrl" alt="Preview Image" />
		</el-dialog>
		<!--图片弹窗-->
		<el-dialog
			v-model="state.selectImgShow"
			title="选择图片"
			center
			width="80%"
			append-to-body
		>
			<Accessory type="1" @select="imgSelectBtn" ></Accessory>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { toRefs,ref, reactive,onMounted, defineComponent,defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router'
import { pageInfo } from '/@/api';
import { attachmentApi } from '/@/api/attachment';
import { Session } from '/@/utils/storage';
import { ElNotification, ElMessage ,ElMessageBox} from 'element-plus'
import commonFunction from '/@/utils/commonFunction';//复制
	const { copyText } = commonFunction();

// 引入组件
const Accessory= defineAsyncComponent(() => import('/@/components/accessory/index.vue'));

const imageUrl = ref('')
const imageShow = ref(false)
const router = useRouter();
const state = reactive<AttachmentState>({
	roleBtn:router.currentRoute.value.meta.roleBtn,
	dataList:[],
	tbloading:true,
	pages: {
        isAll: false,
        pageCount: 0,
        pageSize: 0,
        recordCount: 0,
        pno: 1
      },
	pageInfo:{
		typeList:[],
		type:'',
		domain:"",
		msg:"jpg/png files with a size less than 500kb"
	},
	fileKey:"",
	fileData:{
		list:[],
		pages:{
			isAll: false,
			pageCount: 0,
			pageSize: 20,
			recordCount: 0,
			pno: 1
		},
		isCollapse:false,
	},
	addFileShow:false,
	fileForm:{
		name:"",
		id:"",
		lx:'',
		imgurl:""
	},
	accessoryKey:"",
	accessoryData:{
		list:[],
		pages:{
			isAll: false,
			pageCount: 0,
			pageSize: 10,
			recordCount: 0,
			pno: 1
		},
		fileId:"",
		orderBy:"",
		isuptp:"",
		istype:"",
		selectList:[],
	},
	uploadBtnShow:false,
	uploadData:{
		headers:{
			Authorization:Session.get('token'),
			"Form-type":"admin",
		},
		data:{
			fid:'',//文件夹ID
			wapp:0,//是否为前端
			uid:0,//用户ID
			type:0,//上传类型
		},
		selectType:"",
		isUpload:false,
		fileList:[]
	},
	tbhdList:[
	],
	yidongFileShow:false,
	yidongFileId:'',
	flieloading:false,
	yidongIdList:[],
	searchFileList:[],
	selectImgShow:false
});
const imgSelectBtn = (item) => {
	for(let p of item){
		state.fileForm.imgurl=p.url;
	}
	quxiaoSelectBtn('img');
};
const quxiaoSelectBtn = (item) => {
	if(item=='img'){
		state.selectImgShow=false;
	}
	
};
const selectImgBtn=(e)=>{
	if(e=="eye"){
		imageUrl.value = state.fileForm.imgurl
  		imageShow.value = true
	}
	if(e=="del"){
		state.fileForm.imgurl="";
	}
	if(e=="select"){
		state.selectImgShow=true;
	}
};
const qdydBtn=()=>{
	if(state.yidongFileId){
		if(state.accessoryData.fileId==state.yidongFileId){
			ElMessage({message:'原始文件夹和目标文件夹相同',type: 'error'});
			return false;
		}
		//  console.log()
		// state.yidongFileShow=false;
		let dt={
			id:state.yidongIdList,
			fileId:state.yidongFileId
		}
		//  console.log(dt)
		attachmentApi('moveAccessory',dt).then(res=>{
			//  console.log(res)
			ElMessage({message:'移动成功',type: 'success'});
			state.accessoryData.fileId=state.yidongFileId;
			state.accessoryData.selectList=[];
			state.yidongIdList=[];
			state.yidongFileId="";
			getAccessoryList();
			state.yidongFileShow=false;
		})
	}else{
		ElMessage({message:'请选择移动到的文件夹',type: 'error'});
	}
}
const qudingBtn=()=>{
	if(state.fileForm.name){
		//  console.log(state.fileForm)
		if(state.fileForm.lx=='file'){
			if(state.fileForm.id){
				let dt={
					fileName:state.fileForm.name,
					id:state.fileForm.id,
				}
				xiugaiFile(dt)
			}else{
				let dt={
					fileName:state.fileForm.name,
				}
				newFile(dt);
			}
		}
		if(state.fileForm.lx=='accessory'){
			if(state.fileForm.id){
				let dt={
					fname:state.fileForm.name,
					id:state.fileForm.id,
					imgurl:state.fileForm.imgurl,
				}
				xiugaiAccessory(dt)
			}
		}
	}else{
		ElMessage.error('名称不能为空')
	}
}
// 新建文件夹
const newFile=(dt)=>{
	if(!dt){
		return false;
	}
	dt.type=state.pageInfo.type;
	attachmentApi('addFile',dt).then(res=>{
		//  console.log(res)
		ElMessage({message:'新增文件夹成功',type: 'success'});
		state.addFileShow=false;
		getfileList();
	})
}
// 修改文件夹
const xiugaiFile=(dt)=>{
	if(!dt){
		return false;
	}
	attachmentApi('upFile',dt).then(res=>{
		//  console.log(res)
		ElMessage({message:'修改文件夹成功',type: 'success'});
		state.addFileShow=false;
		getfileList(state.fileData.pages.pno);
	})
}
// 修改附件
const xiugaiAccessory=(dt)=>{
	if(!dt){
		return false;
	}
	attachmentApi('upAccessory',dt).then(res=>{
		//  console.log(res)
		ElMessage({message:'修改附件信息成功',type: 'success'});
		state.addFileShow=false;
		getAccessoryList(state.accessoryData.pages.pno);
	})
}
const addFileBtn=(e,item)=>{
	if(e=='add'){
		state.fileForm={
			name:'',
			id:'',
			lx:'file'
		};
		state.addFileShow=true;
	}
	if(e=='editor'){
		if(item.id){
			state.fileForm={
				name:item.fileName,
				id:item.id,
				lx:'file'
			};
			state.addFileShow=true;
		}
	}
	if(e=='del'){
		if(item.id){
			ElMessageBox.confirm(
				'确定删除名字为 '+item.fileName+' 的文件夹吗?',
				'提示',
				{
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
				}
			)
			.then(() => {
				let dt={
					isdel:1,
					id:item.id,
				}
				xiugaiFile(dt)
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
		}
	}
}
const fileBtn = (item) => {
	//  console.log(item)
	if(item.id!=state.accessoryData.fileId){
		state.accessoryData.fileId=item.id;
		getAccessoryList();
	}
}
const sortBtn = (item) => {
//   multipleSelection.value = val
	//  console.log(item)
	if(item.prop=="fsize"){
		if(item.order=='ascending'){
			state.accessoryData.orderBy="fsizeAsc";
		}else if(item.order=='descending'){
			state.accessoryData.orderBy="fsizeDesc";
		}else{
			state.accessoryData.orderBy="";
		}
		getAccessoryList();
	}
	if(item.prop=="create_time"){
		if(item.order=='ascending'){
			state.accessoryData.orderBy="timeAsc";
		}else if(item.order=='descending'){
			state.accessoryData.orderBy="timeDesc";
		}else{
			state.accessoryData.orderBy="";
		}
		getAccessoryList();
	}
}
const handleSelectionChange = (val: User[]) => {
//   multipleSelection.value = val
	//  console.log(val)
	state.accessoryData.selectList=val;
}
// 表单头选择
function onChangeShowColumn(i){
	if(state.tbhdList[i].show){
		state.tbhdList[i].show=false;
	}else{
		state.tbhdList[i].show=true;
	}
}
// 表单头显示判断
function tbhdShow(){
	for(let i in state.tbhdList){
		state.tbhdList[i].tb=false;
		for(let p of state.tbhdList[i].lxtype){
			if(p==state.pageInfo.type){
				state.tbhdList[i].tb=true;
			}
		}
	}
	return false;
}
// 权限判断
const isAuthBtn = (e) => {
	let auth=false;
	if(e){
		for(let p of state.roleBtn){
			if(p==e){
				auth=true;
			}
		}
	}
	return auth;
};
// 跳转
const tourl = (e,iswb) => {
	if(iswb){
		window.open(e);
	}else{
		router.push(e);
	}
};
// 获取页面前置
function getpageInfo(){
	pageInfo('attachment').then(res=>{
		//  console.log(res)
		state.pageInfo.typeList=res.typeList;
		state.pageInfo.type=res.type;
		state.pageInfo.domain=res.domain;
		state.pageInfo.msg=res.msg;
		state.uploadData.selectType=res.selectType;
		state.tbhdList=res.tbhdList;
		getfileList();
		getAccessoryList();
		tbhdShow();
	})
}
// 获取搜索的文件信息
const searchFileName=(query: string)=>{
	state.flieloading=true;
	let dt={
		pages:{
			pno:1,
			pageSize:50
		},
		type:state.pageInfo.type,
		key:query,
		}
	attachmentApi("fileList",dt).then(res=>{
		//  console.log(res)
		state.searchFileList=res.list;
		state.flieloading=false;
	})
}
// 获取文件夹信息
function getfileList(pno){
	if(!pno){
		pno=1;
	}
	let dt={
		pages:{
			pno:pno,
			pageSize:state.fileData.pages.pageSize
		},
		type:state.pageInfo.type,
		key:state.fileKey,
	}
	attachmentApi("fileList",dt).then(res=>{
		//  console.log(res)
		state.fileData.list=res.list;
		state.fileData.pages=res.pages;
		state.pageInfo.type=res.type;
	})
}

function accessoryUpBtn(item){
	state.fileForm={
		name:item.fname,
		id:item.id,
		lx:'accessory',
		imgurl:item.imgurl
	};
	state.addFileShow=true;
}

function accessoryDelBtn(item){
	// //  console.log(item)
	ElMessageBox.confirm(
		'确定删除该附件吗?',
		'提示',
		{
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
		}
	)
	.then(() => {
		let dt=[];
		for(let p of item){
			dt.push({id:p.id,isdel:1})
		}
		attachmentApi('delAccessory',dt).then(res=>{
			//  console.log(res)
			ElMessage({message:'删除成功',type: 'success'});
			state.accessoryData.selectList=[];
			getAccessoryList();
		})
		//  console.log(dt)
	})
	.catch(() => {
		ElMessage({
			type: 'info',
			message: '取消删除',
		})
	})
}
function accessoryYidongBtn(item){
	//  console.log(item)
	let dt=[];
	for(let p of item){
		dt.push({id:p.id})
	}
	state.yidongIdList=dt;
	searchFileName();
	state.yidongFileShow=true;
}
// 获取附件信息
function getAccessoryList(pno){
	state.tbloading=true;
	if(!pno){
		pno=1;
	}
	let dt={
		pages:{
			pno:pno,
			pageSize:state.accessoryData.pages.pageSize
		},
		type:state.pageInfo.type,
		key:state.accessoryKey,
		fileId:state.accessoryData.fileId,
		istype:state.accessoryData.istype,
		isuptp:state.accessoryData.isuptp,
		orderBy:state.accessoryData.orderBy,
	}
	//  console.log(dt);
	attachmentApi("accessoryList",dt).then(res=>{
		//  console.log(res)
		state.accessoryData.list=res.list;
		state.accessoryData.pages=res.pages;
		state.tbloading=false;
		// state.pageInfo.type=res.type;
		// getAccessoryList();
	})
}
const handleSizeChange = (val: number) => {
  state.accessoryData.pages.pageSize=val;
  getAccessoryList();

}
const handleCurrentChange = (val: number) => {
  getAccessoryList(val);
}
const fileChange = (val: number) => {
	getfileList(val);
}
function typechange(e){
	// //  console.log(e)
	for(let p of state.pageInfo.typeList){
		if(e==p.key){
			//  console.log(p)
			state.uploadData.selectType=p.selectType;
		}
	}
	state.accessoryData.fileId="";
	tbhdShow();
	getfileList();
	getAccessoryList();
}
// 上传弹窗
function uploadBtn(e){
	if(e=='open'){
		state.uploadData.data.fid=state.accessoryData.fileId;
		state.uploadData.data.type=state.pageInfo.type;
		state.uploadBtnShow=true;
	}
	if(e=='close'){
		if(state.uploadData.fileList.length>0){
			getAccessoryList();
			state.uploadData.isUpload=false;
			state.uploadData.fileList=[];
		}
		state.uploadBtnShow=false;
	}
}
// 上传成功
function uploadSuccess(response, uploadFile, uploadFiles){
	if(response.code==200){
		state.uploadData.isUpload=true;
		if(state.type=='1'){
        }else{
            ElNotification({
                message: "上传成功",
                type: 'success',
            });
            uploadBtn('close');
        }
	}else{
		ElNotification({
			title: 'Error',
			message: response.msg,
			type: 'error',
		});
		for(let i in state.uploadData.fileList){
			if(state.uploadData.fileList[i].uid==uploadFile.uid){
				state.uploadData.fileList.splice(i, 1);
			}
		}
	}
}
// 上传成功预览
function uploadPreview(uploadFile){
	imageUrl.value = uploadFile.url!
  	imageShow.value = true
}
// 预览图片
function imgPreview(item){
	imageUrl.value = item
  	imageShow.value = true
}
const fileSelect = (key: string, keyPath: string[]) => {
  state.accessoryData.fileId=key;
  getAccessoryList();
}
onMounted(()=>{
      // 获取当前路由实例参数
    //   //  console.dir(router.currentRoute.value.query.id);
      //  console.dir(router.currentRoute.value.meta.roleBtn);
	  if(!isAuthBtn('index')){
		  router.push('/401');
	  }else{
	  	//操作函数
		  getpageInfo();
	  }
})
</script>

<style scoped lang="scss">
	.routineattachment{
		padding:5px;
		.attachmentData{
			&-harder{
				display:flex;
			}
			&-table{
				display:flex;
				margin-top:15px;
				.close{
					width: 0px !important;
					margin: 0 !important;
    				border: 0 !important;
				}
				&-left{
					transition:  all .2s ease-in-out;
					-webkit-transition:  all .2s ease-in-out;
					-moz-transition:  all .2s ease-in-out;
					-o-transition:  all .2s ease-in-out;
					width: 180px;
					border-right:1px solid #ccc;
					margin-right:5px;
					padding-right:5px; 
					&-item{
						line-height: 50px;
						width: 100%;
						cursor: pointer;
						overflow: hidden;
						position: relative;
						.fileBtnCss{
							display: none;
							position: absolute;
							right: 0;
							top: 0;
						}
					}
					&-item:hover .fileBtnCss{
						display: block;
					}
					.active{
						color: var(--el-menu-active-color);
					}
				}
				&-right{
					.headerSearch{
						display: inline-block;
						margin-left:10px;
					}
					&-center{
						width: 100%;
					}
				}
			}
		}
	}
</style>
